<template>
  <div class="login">
    <div class="login-wrap">
      <div class="login-con">
        <div class="login-box">
          <a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item prop="username">
              <div class="title">用户名：</div>
              <a-input v-model="form.username" placeholder="账号/手机号"/>
            </a-form-model-item>
            <a-form-model-item prop="password">
              <div class="title">密码：</div>
              <a-input type="password" v-model="form.password" placeholder="密码"/>
            </a-form-model-item>
          </a-form-model>
          <a-button type="primary" @click="login">登录</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {login} from "@/api/user";
import {findTreesForLogin} from "@/api/resource";
import {loopTrees} from "@/utils/treeHandler";
import routes from "@/router/routes";

export default {
  components: {},
  data() {
    return {
      labelCol: {span: 0},
      wrapperCol: {span: 24},
      rules: {
        username: [
          {required: true, message: '用户名不能为空', trigger: 'change'},
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'change'},
        ]
      },
      form: {
        username: "",
        password: ""
      },
      authMenu: []
    };
  },
  created() {
    this.registerEnter()
  },
  destroyed() {
    this.destroyEnter();
  },
  methods: {
    login() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const params = this.form;
          const res = await login(params);
          if (res['data']) {
            localStorage.token = res['data']['accessToken'];
            localStorage.user = JSON.stringify(res['data']['user']);
            localStorage.isLogin = true;
            await this.getFindTreesForLogin(res['data']['user']);
            this.compileAuthMenu();
            this.$router.push({name: 'home'});
          }
        }
      })
    },
    async getFindTreesForLogin(user) {
      const params = {
        userId: user['userId']
      }
      const res = await findTreesForLogin(params);
      if (res['data'] && res['data']['data']) {
        this.authMenu = res['data']['data'];
      }
    },
    compileAuthMenu() {
      const temp = {};
      const routesCacheByPath = {};
      loopTrees(routes, (e, parent) => {
        temp[e.title] = {...e, component: null};
      });
      loopTrees(this.authMenu, (e, parent) => {
        const routerData = temp[e.title || e.name];
        if (routerData) {
          for (const key in routerData) {
            e[key] = routerData[key];
          }
          //将合并后的权限路由数据根据path进行缓存用于页面权限验证
          if (parent) {
            routesCacheByPath[`${parent.path}/${routerData.path}`] = true;
          } else {
            routesCacheByPath[routerData.path || '/'] = true;
          }
        }
      });
      const menus = this.authMenu.map(item => {
        if (!item.children.length) item.children = null;
        return item
      })
      localStorage.menus = JSON.stringify(menus);
      localStorage.routesCacheByPath = JSON.stringify(routesCacheByPath);
      this.$store.commit('setAppMenuList', menus);
      this.$store.commit('setRoutesCacheByPath', routesCacheByPath);
    },
    registerEnter(){
      window.onkeypress = e => {
        if(e.key==='Enter'){
          this.login()
        }
      }
    },
    destroyEnter(){
      window.onkeypress = null;
    }
  }
};
</script>

<style lang="stylus">
.login {
  width: 100%;
  height: 100vh;
  background-image: url('../../assets/images/login-bg.png');
  background-color #CBDBFF
  background-size: 100% 100%;
  background-position: center;
  position: relative;

  &-wrap {
    width 1100px
    height 600px
    position absolute
    left 50%
    top 50%
    transform translateX(-50%) translateY(-50%)
    background-color: #ffffff;
    box-shadow: 0 8px 16px 0 rgba(12, 48, 133, 0.25), 0 20px 40px 0 rgba(12, 48, 133, 0.10);
    border-radius: 24px;
    background-image url("../../assets/images/login-box.png")
    background-size: 1071px 555px;
    background-position: left bottom;
    background-repeat no-repeat
  }

  &-con {
    position absolute
    left 65px
    top 180px
    width 280px

    .login-box {
      margin: 0 auto;
      width: 100%;

      .title {
        font-size: 14px;
        color: #5D656F;
        line-height: 14px;
      }

      .ant-btn {
        margin-top 30px
        width 100%
        background: #6190F7;
        box-shadow: 0 2px 4px 0 rgba(60, 106, 194, 0.30);
        border-radius: 16px;
      }

      .ant-input {
        font-weight bold
        height 24px
        padding 6px
        border 0
        border-radius 0
        border-bottom 1px solid #5D656F;
      }

      .ant-input::-webkit-input-placeholder {
        font-size: 14px;
        color: #032A63;
        line-height: 16px;
        font-weight bold
      }
    }

    &-header {
      font-size: 16px;
      font-weight: 300;
      text-align: center;
      padding: 30px 0;
    }

    .form-con {
      padding: 10px 0 0;
    }

    .login-tip {
      font-size: 10px;
      text-align: center;
      color: #c3c3c3;
    }
  }
}
</style>
